<template>
  <div style="position:relative;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品添加</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="background: white;padding-bottom: 50px;position: relative;z-index:2">
      <el-steps :space="600" :active="active" finish-status="success" style="margin: 50px">
        <el-step :title="steps[0]">
        </el-step>
        <el-step :title="steps[1]">
        </el-step>
        <el-step :title="steps[2]">
        </el-step>
      </el-steps>
    </div>
    <el-tabs v-model="activeName" type="card" style="position: relative;top:-45px;z-index:1">
      <!--+++++++++++++++++++++++++++++第一部分+++++++++++++++++++++++++++++-->
      <el-tab-pane label="" name="first" disabled>商品分类（没做）</el-tab-pane>
      <!--+++++++++++++++++++++++++++++第二部分+++++++++++++++++++++++++++++-->
      <el-tab-pane label="" name="second" disabled>
        <el-tag type="success">商品信息</el-tag>
        <el-form ref="form" :model="form" label-width="80px" style="width: 400px">
          <el-form-item label="商品名称">
            <el-input v-model="form.mallGoods.name"></el-input>
          </el-form-item>
          <el-form-item label="选择品牌">
            <el-select v-model="form.mallGoods.brandId" placeholder="请选择活动区域">
              <el-option v-for="brand in brands" :label="brand.brandName" :value="brand.id">{{brand.brandName}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-input type="textarea" v-model="form.mallGoods.introduce"></el-input>
          </el-form-item>
          <el-form-item label="物流类型">
            <!--物流(1-普通，2-门店自提，3-国外直邮)-->
            <el-radio-group v-model="form.mallGoods.logistics">
              <el-radio label="1">普通快递</el-radio>
              <el-radio label="2">门店自提</el-radio>
              <el-radio label="3">国外直邮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存预警">
            <el-input-number v-model="form.mallGoods.stockWarning" :min="10" :max="1000" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="计量单位">
            <el-input v-model="form.mallGoods.unit" style="width: 50px"></el-input>
          </el-form-item>
          <el-form-item label="服务保障">
            <!--服务保障(1-七天无理由退货，2-包邮，3-包税)-->
            <el-radio-group v-model="form.mallGoods.guarantee">
              <el-radio label="1">七天无理由退货</el-radio>
              <el-radio label="2">包邮</el-radio>
              <el-radio label="3">包税</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="积分值">
            <el-input v-model="form.mallGoods.integral" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="成长值">
            <el-input v-model="form.mallGoods.growth" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="上架状态">
            <!--状态(0-未上架 1-已上架)")-->
            <el-radio-group v-model="form.mallGoods.state">
              <el-radio label="true">上架</el-radio>
              <el-radio label="false">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="限购">
            <!--每个用户限购数量(0-无限)-->
            <el-radio-group v-model="quotaState">
              <el-radio  label="0" @change="clickQuotaState">不限</el-radio>
              <el-radio  label="1">限制</el-radio>
              <el-input v-if="quotaState>0" v-model="form.mallGoods.quota" style="width: 100px"></el-input>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="促销">
            <!--每个用户限购数量(0-无限)-->
            <el-radio-group v-model="form.mallGoods.promotionState">
              <el-radio  label="true">开启</el-radio>
              <el-radio  label="false" @change="clickPromotionState">不开启</el-radio>
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                style="display: inline-block;margin: 20px"
                v-show="form.mallGoods.promotionState=='true'"
                v-model="promotionStartTimes"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!--+++++++++++++++++++++++++++++第三部分+++++++++++++++++++++++++++++-->
      <el-tab-pane class="div111" label="" name="third" disabled>
        <el-form label-width="80px" >

          <div v-if="form.mallGoodsSpecsList1.length>0" class="di1">
            <div style="float: left;width: 480px">
              <el-form-item label="规格名">
                <el-input v-model="gui1" style="width:100px;"/>
              </el-form-item>
              <el-form-item label="样式">
                <el-input v-for="s in form.mallGoodsSpecsList1" v-model="s.style" style="width:100px;"/>
              </el-form-item>
            </div>
            <div style="float: right;margin-top: 60px">
              <el-button @click="addStyle('s1')">添加样式</el-button>
            </div>
            <i class="el-icon-close closeIcon" @click="closeSpecs('s1')"></i>
          </div>



          <div v-if="form.mallGoodsSpecsList2.length>0" class="di1">
            <div style="float: left;width: 480px">
              <el-form-item label="规格名">
                <el-input v-model="gui2" style="width:100px;"/>
              </el-form-item>
              <el-form-item label="样式">
                <el-input v-for="s in form.mallGoodsSpecsList2" v-model="s.style" style="width:100px;"/>
              </el-form-item>
            </div>
            <div style="float: right;margin-top: 60px">
              <el-button @click="addStyle('s2')">添加样式</el-button>
            </div>
            <i class="el-icon-close closeIcon" @click="closeSpecs('s2')"></i>
          </div>

          <div v-if="form.mallGoodsSpecsList3.length>0" class="di1">
            <div style="float: left;width: 480px">
              <el-form-item label="规格名">
                <el-input v-model="gui3" style="width:100px;"/>
              </el-form-item>
              <el-form-item label="样式">
                <el-input v-for="s in form.mallGoodsSpecsList3" v-model="s.style" style="width:100px;"/>
              </el-form-item>
            </div>
            <div style="float: right;margin-top: 60px">
              <el-button @click="addStyle('s3')">添加样式</el-button>
            </div>
            <i class="el-icon-close closeIcon" @click="closeSpecs('s3')"></i>
          </div>

        </el-form>
        <el-scrollbar class="div11" v-show="specsShow">
          <div>
            <el-input style="width: 70px" type="text" value="规格1" disabled/>
            <el-input style="width: 70px" type="text" value="规格2" disabled/>
            <el-input style="width: 70px" type="text" value="规格3" disabled/>
            <el-input style="width: 70px" type="text" value="库存" disabled/>
            <el-input style="width: 70px" type="text" value="价格" disabled/>
            <el-input style="width: 90px" type="text" value="预警库存" disabled/>
          </div>
          <div v-for="s in form.mallSpecsList" class="div22">
            <el-input style="width: 70px" type="text" :value="s.oneName" disabled/>
            <el-input style="width: 70px" type="text" :value="s.twoName" disabled/>
            <el-input style="width: 70px" type="text" :value="s.threeName" disabled/>
            <el-input style="width: 70px" type="text" v-model="s.stock" />
            <el-input style="width: 70px" type="text" v-model="s.price" />
            <el-input style="width: 90px" type="text" v-model="s.stockWarning" />
          </div>
        </el-scrollbar>

        <el-button @click="addSpecs" style="clear: right">添加规格</el-button>
        <el-button @click="generateSpecs" type="success" style="clear: right">生成</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="doneAction">下一步</el-button>
  </div>


</template>

<script>
  import {brandListForSelect,goodsInsertFirstStep,goodsInsertSecondStep,goodsInsertThirdStep,generateSpecs}  from "../../api/mallMG.js";
  export default {
    name: "GoodsInsert",
    data(){
      return{
        gui1:'',
        gui2:'',
        gui3:'',
        dynamicTags: ['标签一'],
        inputVisible: false,
        inputValue: '',
        specsShow:false,
        brands:[],
        quotaState:'0',
        promotionStartTimes:[],
        form:{
          mallGoodsSpecsList1:[
            {
              id:'',
              specs:'',
              style:''
            },

          ],
          mallGoodsSpecsList2:[

          ],
          mallGoodsSpecsList3:[

          ],
          mallSpecsList:[
            // {
            //   oneId:'',
            //   oneName:'',
            //   twoId:'',
            //   twoName:'',
            //   threeId:'',
            //   threeName:'',
            //   price:'',
            //   stock:'',
            //   stockWarning:''
            // }
          ],
          mallGoodsSpecsList:[

          ],
          mallGoods:{
            id:'',
            brandId:'',
            name:'',
            introduce:'',
            logistics:'1',
            stockWarning:'',
            unit:'',
            articleNo:'',
            guarantee:'1',
            integral:'',
            growth:'',
            state:'true',
            promotionState:'false',
            promotionStartTime:'',
            promotionEndTime:'',
            quota:'0',
          }
        },
        goodsId:'',
        actives:['first','second','third'],
        activeName:'first',
        active:0,
        steps:['进行中','未完成','未完成']
      }
    },
    mounted() {
      this.brandListForSelect()
    },
    methods:{
      /*生成规格*/
      async generateSpecs(){
        /*验证*/
        let f=0;
        if(this.form.mallGoodsSpecsList1.length>0){
          f=1
          if(this.gui1!=''){

          }else{
            this.$message({
              message:'请输入规格名'
            })
          }
        }
        if(this.form.mallGoodsSpecsList2.length>0){
          f=1
          if(this.gui2!=''){

          }else{
            this.$message({
              message:'请输入规格名'
            })
          }
        }
        if(this.form.mallGoodsSpecsList3.length>0){
          f=1
          if(this.gui3!=''){

          }else{
            this.$message({
              message:'请输入规格名'
            })
          }
        }
        if(f==0){
          this.$message({
            message:'请添加规格'
          })
        }
        let mallGoodsSpecsList=[]
        //alert(this.goodsId)
        /*生成数据*/
        for(let i=0;i<this.form.mallGoodsSpecsList1.length;i++){
          let specs=this.form.mallGoodsSpecsList1[i]
          specs.specs=this.gui1
          specs.goodsId=this.goodsId
          mallGoodsSpecsList.push(specs)
        }
        for(let i=0;i<this.form.mallGoodsSpecsList2.length;i++){
          let specs=this.form.mallGoodsSpecsList2[i]
          specs.specs=this.gui2
          specs.goodsId=this.goodsId
          mallGoodsSpecsList.push(specs)
        }
        for(let i=0;i<this.form.mallGoodsSpecsList3.length;i++){
          let specs=this.form.mallGoodsSpecsList3[i]
          specs.specs=this.gui3
          specs.goodsId=this.goodsId
          mallGoodsSpecsList.push(specs)
        }
        /*8888888888888888888888 重点数据 8888888888888888888888 */
        //alert(JSON.stringify(mallGoodsSpecsList))
        this.form.mallGoodsSpecsList=mallGoodsSpecsList

        /*与后端交互 返回id*/
        let json={"list":mallGoodsSpecsList}
        let json2=JSON.stringify(json)
        await generateSpecs(json2).then(res=>{
          if(res.success){
            //alert(JSON.stringify(res.data.list))
            let tagList=res.data.list
            for(let i=0;i<tagList.length;i++){
              let tag=tagList[i]
              let mList1=this.form.mallGoodsSpecsList1
              let mList2=this.form.mallGoodsSpecsList2
              let mList3=this.form.mallGoodsSpecsList3
              for(let i=0;i<mList1.length;i++){
                let m=mList1[i]
                if(m.specs==tag.specs && m.style==tag.style){
                  mList1[i].id=tag.id
                }
              }
              for(let i=0;i<mList2.length;i++){
                let m=mList2[i]
                if(m.specs==tag.specs && m.style==tag.style){
                  mList2[i].id=tag.id
                }
              }
              for(let i=0;i<mList3.length;i++){
                let m=mList3[i]
                if(m.specs==tag.specs && m.style==tag.style){
                  mList3[i].id=tag.id
                }
              }
              this.form.mallGoodsSpecsList1=mList1
              this.form.mallGoodsSpecsList2=mList2
              this.form.mallGoodsSpecsList3=mList3
            }
            this.$message({
              type:'success',
              message:'生成成功'
            })
          }else{
            this.$message({
              type:'error',
              message:'生成失败'
            })
          }
        }).catch(error=>{
          alert(error)
        })


        /*生成互相对应的规格*/
        this.form.mallSpecsList=[]
        let f1=this.form.mallGoodsSpecsList1.length==0?false:true
        let f2=this.form.mallGoodsSpecsList2.length==0?false:true
        let f3=this.form.mallGoodsSpecsList3.length==0?false:true
        for(let i=0;i<=this.form.mallGoodsSpecsList1.length;i++){
          for(let j=0;j<=this.form.mallGoodsSpecsList2.length;j++){
            for(let k=0;k<=this.form.mallGoodsSpecsList3.length;k++){
              alert(this.goodsId)
              let s={
                goodsId:this.goodsId,
                oneId:'',
                oneName:'',
                twoId:'',
                twoName:'',
                threeId:'',
                threeName:'',
                price:'',
                stock: '',
                stockWarning: '',
              }
              let fi1=this.form.mallGoodsSpecsList1[i]
              let fi2=this.form.mallGoodsSpecsList2[j]
              let fi3=this.form.mallGoodsSpecsList3[k]
              //alert(fi1)
              if(f1 && f2 && f3){
                if(fi1==undefined || fi2==undefined || fi3==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi1.style
                s.twoId=fi2.id
                s.twoName=fi2.style
                s.threeId=fi3.id
                s.threeName=fi3.style
              }else if(f1 && f2){
                if(fi1==undefined || fi2==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi1.style
                s.twoId=fi2.id
                s.twoName=fi2.style
              }else if(f1 && f3){
                if(fi1==undefined || fi3==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi1.style
                s.twoId=fi2.id
                s.twoName=fi3.style
              }else if(f2 && f3){
                if( fi2==undefined || fi3==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi2.style
                s.twoId=fi2.id
                s.twoName=fi3.style
              }else if(f1){
                if(fi1==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi1.style
              }else if(f2){
                if(fi2==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi2.style
              }else if(f3){
                if(fi3==undefined){
                  continue
                }
                s.oneId=fi1.id
                s.oneName=fi3.style
              }
              this.form.mallSpecsList.push(s)
            }
          }
        }
        console.log(this.form.mallSpecsList)
        /*8888888888888888888888 重点数据 8888888888888888888888 */
        //alert(JSON.stringify(this.form.mallSpecsList))
        this.specsShow=true


      },
      /*添加样式按钮*/
      addStyle(s){
        let tag={
          specs:this.gui1,
          style:''
        }
        if(s=="s1"){
          this.form.mallGoodsSpecsList1.push(tag)
        }else if(s=="s2"){
          this.form.mallGoodsSpecsList2.push(tag)
        }else if(s=="s3"){
          this.form.mallGoodsSpecsList3.push(tag)
        }
      },
      /*关闭规格按钮*/
      closeSpecs(s){
        if(s=="s1"){
          this.form.mallGoodsSpecsList1=[]
        }else if(s=="s2"){
          this.form.mallGoodsSpecsList2=[]
        }else if(s=="s3"){
          this.form.mallGoodsSpecsList3=[]
        }
      },
      /*添加规格按钮*/
      addSpecs(){
        let tag={
          specs:'',
          style:''
        }
        if(this.form.mallGoodsSpecsList1.length==0){
          this.form.mallGoodsSpecsList1.push(tag)
        } else if(this.form.mallGoodsSpecsList2.length==0){
          this.form.mallGoodsSpecsList2.push(tag)
        }else if(this.form.mallGoodsSpecsList3.length==0){
          this.form.mallGoodsSpecsList3.push(tag)
        }else{
          this.$message({
            message:'最多三种规格'
          })
        }
      },
      /*品牌下拉列表*/
      brandListForSelect(){
        brandListForSelect().then(res=>{
          if(res.success){
            this.brands=res.data.list
          }else{
            this.$message({
              type:'error',
              message:'请求品牌下拉失败'
            })
          }
        }).catch(error=>{

        })
      },
      /*下一步 进度条*/
      async doneAction(){
        //商品分类
        if(this.active==0){
          this.$message({
            message:'完成分类添加',
            type:'success'
          })
        }
        //商品信息
        if(this.active==1){
          this.form.mallGoods.brandId=parseInt(this.form.mallGoods.brandId)
          this.form.mallGoods.promotionStartTime=this.promotionStartTimes[0]
          this.form.mallGoods.promotionEndTime=this.promotionStartTimes[1]
          alert(JSON.stringify(this.form.mallGoods))
          await goodsInsertSecondStep(this.form.mallGoods).then(res=>{
            if(res.success){
              this.goodsId=res.data.goodsId
              this.$message({
                message:'完成信息添加',
                type:'success'
              })
            }else{
              this.$message({
                message:'信息添加失败',
                type:'error'
              })
              return
            }
            this.$router.push('/mall/Goods')
          }).catch(error=>{
            alert(error)
            return
          })
        }
        //商品规格
        else if(this.active==2){
          alert(JSON.stringify(this.form.mallSpecsList))
          goodsInsertThirdStep(JSON.stringify({"list":this.form.mallSpecsList})).then(res=>{
            if(res.success){
              this.$message({
                message:'完成规格添加',
                type:'success'
              })
            }else{
              this.$message({
                message:'规格添加失败',
                type:'error'
              })
            }
          }).catch(error=>{
            alert(error)
          })
        }
        if(this.active<=2) {
          this.steps[this.active] = '已完成'
          this.active++;
          this.activeName=this.actives[this.active]
        }
      },
      // generateSpecs(){
      //   this.form.mallGoodsSpecsList
      // },
      /**/
      handleClick(tab, event){
        console.log(tab, event);
      }
    }
  }
</script>

<style scoped>
  .fontDiv{
    font-family: "Agency FB";
    font-size: 30px;
    margin: 10px;
  }
  .div1{
    height: 300px;
  }
  .div2{
    width: 400px;
    display: inline-block;
    margin: 5px;
  }
  .div3 div{
    display: inline-block;
  }
  .div4{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .div5{
    margin-top: -10px;
    margin-bottom: 30px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
  .div9{
    margin-top: 80px;

  }
  .in1:focus{
    border: none;
  }
  .di1{
    margin: 10px;
    height: 100px;
    border-radius: 20px;
    width: 600px;
    background: #e1f3d8;
    padding: 20px;
    position: relative;
  }
  .closeIcon{
    position: absolute;
    right: 20px;
    top:20px
  }
  .div11{
    z-index: 100000;
    position: absolute;
    height:600px;
    top:20px;
    left:700px
  }
  .div111{
    width: 110%;
    position: relative;
  }
</style>
